<template>
  <div>
    <el-card>
      <!-- 添加权限按钮 -->
      <div slot="header">
        <el-row type="flex">
          <el-col :span="12">
            <el-button type="primary" size="small" @click="addFn">添加房产</el-button>
          </el-col>
          <el-col :span="12">
            <el-row type="flex">
              <el-select v-model="category" placeholder="全部分类" @change="screenFn">
                <el-option v-for="item in classList" :key="item.id" :label="item.title" :value="item.id" />
              </el-select>
              <el-select v-model="agent" placeholder="全部经纪" @change="screenFn">
                <el-option v-for="item in agentList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-input v-model="title" placeholder="请输入关键字">
                <el-button slot="append" size="small" @click="screenFn">筛选</el-button>
              </el-input>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <!-- 表单 -->
      <el-table border style="width: 100%" :data="list">
        <el-table-column label="封面" prop="image">
          <template v-slot="{row}">
            <img width="100px" :src="row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" />

        <el-table-column label="标签" prop="tags">
          <template v-slot="{row}">
            <el-tag v-for="item in row.tags" :key="item.id" type="success">
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="地址" prop="address" />
        <el-table-column label="分类" prop="category.title" />
        <el-table-column label="经纪" prop="agent.name" />
        <el-table-column label="价格" prop="price" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="图片" prop="photos">
          <template v-slot="{row}">
            <img width="100px" :src="row.photos" alt="">
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="primary" size="small" @click="editorFn(row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="limit"
          @current-change="curChangeFn"
        />
      </el-row>
    </el-card>

    <!-- 添加与编辑房产 -->
    <AddEditorProperty ref="propertyForm" :show-estate-dialog.sync="showEstateDialog" @updataEvent="getPropertyList" />
  </div>
</template>

<script>
import { getPropertyList, getPropertyNum, getSpecifProperty, delProperty } from '@/api/realEstate.js'
import AddEditorProperty from './components/add-property.vue'
import { getTypes } from '@/api/types'
import { getBrokers } from '@/api/brokers'

export default {
  components: { AddEditorProperty },
  data() {
    return {
      list: [],
      limit: 2,
      start: 0,
      total: 0,
      showEstateDialog: false,
      classList: [],
      agentList: [],
      category: null,
      agent: null,
      title: null
    }
  },
  created() {
    this.getPropertyList()
  },
  methods: {

    // ---封装获取房产列表函数---
    async getPropertyList() {
      const res = await getPropertyList({
        _limit: this.limit,
        _start: this.start,
        agent: this.agent,
        category: this.category,
        title_contains: this.title
      })
      this.list = res.data
      // console.log(93, this.list)

      // 获取房产数量
      const reslut = await getPropertyNum({
        agent: this.agent,
        category: this.category,
        title_contains: this.title
      })
      this.total = reslut.data

      // 获取全部分类
      const classFn = await getTypes()
      this.classList = classFn.data
      this.classList.unshift({ title: '全部分类' })

      // 获取全部经纪人
      const agentFn = await getBrokers()
      this.agentList = agentFn.data
      this.agentList.unshift({ name: '全部经纪' })
    },

    // -----页面发生变化时-----
    curChangeFn(page) {
      this.start = page === 1 ? 0 : (page - 1) * this.limit
      this.getPropertyList()
    },

    // 实现筛选
    async screenFn() {
      this.getPropertyList()
    },

    // ---添加房产按钮---
    addFn() {
      this.showEstateDialog = true
    },

    // ---编辑按钮---
    async editorFn(id) {
      this.showEstateDialog = true
      const res = await getSpecifProperty(id)
      // 数据回填
      this.$refs.propertyForm.formData = res.data
      // 地址的字符串转化为数组，可以实现地址回填
      this.$refs.propertyForm.formData.address = res.data.address.split(',')
      this.$refs.propertyForm.getSpecifProperty(id)
    },

    // 删除按钮
    delFn(id) {
      this.$confirm('此操作将永久删除该房产信息, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用删除接口并刷新列表
        await delProperty(id)
        this.getPropertyList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

  }
}
</script>

<style scoped>
 .el-card {
   margin: 20px;
 }

 .el-button+.el-button{
   margin-left: 0;
 }

</style>
